/**
 * Created by wubo on 2018/3/7.
 *
 * 菜单组件
 */
define(function(require, exports, module) {
    require("ztree");
    require("element");
    var EventHub = require("../../common/js/event");
    var menuTpl = require("./tpl/menuTpl.html");
    var store = require("../../common/js/event/event.index.js");

    Vue.use(ELEMENT);



    var menu = Vue.extend({
        name:"menu-com",
        props:[],
        store:store,
        data:function(){
            return {
                isSider:false,
                curExpandNode:null,
                menuList : [
                {
                    icon: "&#xe603;",
                    name: "任务管理",
                    open: false,
                    level: 0,
                    children: [
                        {
                            name: "父节点11 - 折叠",
                        },
                        {
                            name: "父节点12 - 折叠",
                        },
                        {name: "父节点13 - 没有子节点", isParent: true}
                    ]

                },
                {
                    icon: "&#xe603;",
                    name: "部门管理",
                    isParent: true,
                    children: [
                        {
                            name: "系统安全", open: false,
                            icon:"",
                            link:"security"
                        },
                        {
                            name: "卸载和安装模块",
                        },
                        {
                            name: "父节点23 - 折叠",
                        }
                    ]
                },
                {
                    icon: "&#xe603;",
                    name: "文件管理",
                    children: [
                        {
                            name: "父节点21 - 展开", open: false,
                        },
                        {
                            name: "父节点22 - 折叠",
                        },
                        {
                            name: "父节点23 - 折叠",
                        }
                    ]
                },
                {
                    icon: "&#xe603;",
                    name: "系统管理",
                    isParent: true,
                    children: [
                        {
                            name: "系统安全", open: false,
                            icon: "&#xe6a2;",
                            link:"/security",
                        },
                        {
                            name: "卸载和安装模块",
                            icon: "&#xe70d;",
                            link:"/module/install",
                        }
                    ]
                },
                {
                    icon: "&#xe603;",
                    name: "组件管理",
                    isParent: true,
                    children: [
                        {
                            name: "button", open: false,
                            icon: "&#xe6a2;",
                            link:"/element/index",
                        }
                    ]
                }
            ]
            };
        },
        template:menuTpl,
        methods:{

            /**
             * sider
             */
            sider:function(){
                if(this.isSider){
                    $("#menu").removeClass("menu-box-min");
                    $("#container").removeClass("c-box-max").addClass("c-box-default");
                }
                else
                {
                    $("#menu").addClass("menu-box-min");
                    $("#container").addClass("c-box-max").removeClass("c-box-default");
                }

                this.isSider = !this.isSider;
            },

            /**
             * 加载菜单数据
             */
            loadMenuData:function(){
                var self = this;
                var $treeDom = $("#menuTree");
                self.curExpandNode = null;

                var setting1 = {
                    view: {
                        expandSpeed: 100,
                        dblClickExpand: false,
                        showLine: false,
                        addDiyDom:function(treeId, treeNode) {
                            var aObj = $("#" + treeNode.tId + "_a");
                            if ($("#diyBtn_"+treeNode.id).length > 0)
                                return;

                            var iconHtml = "<span class='m-icon'>" + (treeNode.icon ? treeNode.icon : "") + "</span>";
                            var contentHtml = "<span class='m-name'>" + treeNode.name + "</span>";

                            var aHtml = iconHtml + contentHtml;
                            aObj.html(aHtml);
                        }
                    },
                    data: {
                        simpleData: {
                            enable: true
                        },
                        key: {
                            url: "xUrl"
                        }
                    },
                    callback: {
                        beforeExpand: self.beforeExpand,
                        onExpand: self.onExpand,
                        onClick: self.onNodeClick
                    }
                };

                $("<p class='m-tip dn'><span class='triangle'></span><span class='title'></span></p>").appendTo("body");
                $treeDom.delegate("a.level1","mouseenter mouseleave",function(e){
                    if(e.type == 'mouseenter' && self.isSider){
                        var y = $(this).offset().top;
                        var x = $(this).offset().left + 47;
                        var title = $(this).attr("title");
                        $(".m-tip .title").text(title);
                        $(".m-tip").css({top:y + "px",left:x + "px"});
                        $(".m-tip").addClass("db").removeClass("dn");
                    }
                    else{
                        $(".m-tip").addClass("dn").removeClass("db");
                    }
                });



                $.fn.zTree.init($treeDom, setting1, this.menuList);
            },

            /**
             * 单路径
             * @param newNode
             */
            singlePath:function(newNode) {
                var curExpandNode = this.curExpandNode;
                if (newNode === curExpandNode) return;
                if (curExpandNode && curExpandNode.open==true) {
                    var zTree = $.fn.zTree.getZTreeObj("menuTree");
                    if (newNode.parentTId === curExpandNode.parentTId) {
                        zTree.expandNode(curExpandNode, false);
                    } else {
                        var newParents = [];
                        while (newNode) {
                            newNode = newNode.getParentNode();
                            if (newNode === curExpandNode) {
                                newParents = null;
                                break;
                            } else if (newNode) {
                                newParents.push(newNode);
                            }
                        }
                        if (newParents!=null) {
                            var oldNode = curExpandNode;
                            var oldParents = [];
                            while (oldNode) {
                                oldNode = oldNode.getParentNode();
                                if (oldNode) {
                                    oldParents.push(oldNode);
                                }
                            }
                            if (newParents.length > 0) {
                                zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
                            } else {
                                zTree.expandNode(oldParents[oldParents.length-1], false);
                            }
                        }
                    }
                }
                this.curExpandNode = newNode;
            },

            /**
             * 展开之前处理
             * @param treeId
             * @param treeNode
             */
            beforeExpand:function(treeId, treeNode) {
                var curExpandNode = this.curExpandNode;
                var pNode = curExpandNode ? curExpandNode.getParentNode():null;
                var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
                var zTree = $.fn.zTree.getZTreeObj("menuTree");
                for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
                    if (treeNode !== treeNodeP.children[i]) {
                        zTree.expandNode(treeNodeP.children[i], false);
                    }
                }
                while (pNode) {
                    if (pNode === treeNode) {
                        break;
                    }
                    pNode = pNode.getParentNode();
                }
                if (!pNode) {
                    this.singlePath(treeNode);
                }

            },

            /**
             * 展开事件处理
             *
             * @param event
             * @param treeId
             * @param treeNode
             */
            onExpand:function(event, treeId, treeNode) {
                this.curExpandNode = treeNode;
            },


            /**
             * 点击事件
             * @param e
             * @param treeId
             * @param treeNode
             */
            onNodeClick:function(e,treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("menuTree");
                zTree.expandNode(treeNode, null, null, null, true);

                var aObj = $("#" + treeNode.tId + "_a");
                if(treeNode.level == 0){
                    if(treeNode.open)
                    {
                        aObj.closest("li").siblings().find("a.level0 .m-icon").html("&#xe603;");
                        aObj.children(".m-icon").html("&#xe828;")
                    }
                    else
                    {

                        aObj.children(".m-icon").html("&#xe603;");
                    }
                }

                if(treeNode.link){
                    EventHub.$emit('menuItemClick',treeNode.link);
                }
            },

        },

        mounted:function(){
            this.loadMenuData();
        },
    });

    Vue.component('menu-com',menu);
})